//// out:my-text.css
@color: bule;
@import 'two';
/**
*这是一个注释块
*/
@my-css: banner;

@{my-css} {
    font-size: 40px;
    line-height: 30px;
    margin: 0 auto;
    text-align: center;
}

@property: color;

body {
    background: @color;
}

div {
    color: @color;
}

.widget {
    @{property}: @color;
    background-@{property}: @color
}

// @var:0;
// .class{
//     @var:3;
//     .brass{
//         @var:4;
//         three:@var;
//         @var:6;
//         four:@var;
//     }
//     one:@var
// }

.header {
    background: #333;

    & h1 {
        font-size: 20px;
    }

    &:hover {
        color: aliceblue;
        background-color: aqua;
    }
}

.bordered {
    border: 1px solid #000;
    border-radius: 5px;
}

#name {
    color: #eee;
    .bordered()
}

.bordereds() {
    color: #333;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 10px;
}

.p2 {
    .bordereds;
}

.p3 {
    .bordereds()
}

.backgrounded(@width, @height, @color, @size, @radius) {
    background-color: @color;
    height: @height;
    width: @width;
    border: @color solid @size;
    border-radius: @radius;
}

div {
    .backgrounded(20px, 30px, #333, 2px, 2px)
}

@base: #345337;
@width: 0.5;

.class {
    width: percentage(@width);
    color: saturate(@base, 50%);
    background-color: spin(lighten(@base, 20%), 10);
}